<template>
  <div class="container1">
    <div class="top">
      <div class="img">
        <van-image
            round
            width="100%"
            height="100%"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </div>
      <div class="info">
        <div class="name">
          普通用户
        </div>
        <div class="tel" style="color: #909399">
          <van-icon name="friends-o"/>
          {{ qq }}
        </div>
      </div>
    </div>

    <div class="card">
      <div class="text">
        总积分
        <van-icon name="browsing-history-o"/>
      </div>
      <div class="score">
        {{ score }}
      </div>
       <div style="font-size: 14px;color: #ffffff;margin: 10px">
        会员到期时间:{{ member == 0 ? '会员已过期' : member }}
      </div>
      <!--      <span style="margin-top: 20px">{{ t == 0 ? '会员已过期' : '会员还有' + t + '天过期' }}</span>-->
    </div>
    <div class="box">
      <div class="item" @click="router.push('score')">
        <van-icon style="font-size:25px" name="point-gift-o"/>
        积分兑换
      </div>
      <div class="item" @click="router.push('member')">
        <van-icon style="font-size:25px" name="point-gift-o"/>
        充值会员
      </div>
      <div class="item" @click="router.push('record')">
        <van-icon style="font-size:25px" name="label-o"/>
        积分记录
      </div>
      <div class="item" @click="Confirm">
        <van-icon style="font-size:25px" name="service-o"/>
        客服
      </div>


    </div>
    <div class="record">
      <tiny-tag color="blue">正在使用中</tiny-tag>
      <div class="game" v-for="(item,idx) in offline">
        <div>
          <img :src="item.img" alt="">
          <div class="content">
            <span style="line-height: 30px;color: #303133;font-size: 17px;">{{ item.name }}</span>
            <span>{{ item.account }}</span>
            <span>{{ item.code }}</span>
            <van-button @click="offline1(item)" type="danger" size="small">下线</van-button>
          </div>
        </div>
      </div>
      <div class="game" v-for="(item,idx) in online">
        <div>
          <img :src="item.img" alt="">
          <div class="content">
            <span style="line-height: 30px;color: #303133;font-size: 17px;">{{ item.name }}</span>
            <span>{{ item.account }}</span>
            <span>{{ item.code }}</span>
            <van-button @click="offline2(item)" type="danger" size="small">下线</van-button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import {ref, onMounted, inject} from "vue"
import {useRouter} from "vue-router";
import {Tag as TinyTag} from '@opentiny/vue'
import {showDialog, showNotify} from "vant";

const axios = inject("axios")
const router = useRouter()
const score = ref(0)
const online = ref({})
const offline = ref({})
import time from '../utils/time.js'

const Confirm = () => {
  showDialog({
    title: '客服',
    message: "请联系淘宝客服",
    theme: 'round-button',
  }).then(() => {
    router.back()
  });
}
const code = () => {
  router.push("/code")
}
const check = () => {
  var t = window.localStorage.getItem("offlineTime")
  if (t == undefined || time(t) > 3) {
    return true
  }
  return false
}

const offline1 = (item) => {
  if (check()) {
    axios.get("goods/offline1?qq=" + qq.value + "&name=" + item.name).then(res => {
      localStorage.setItem("offlineTime", new Date())
      window.location.href.repeat()
      // window.localStorage.setItem("day", t.value)
    }).catch(err => {

    })
  } else {
    showNotify({type: 'danger', message: "下线冷却时间3h"})

  }
}
const offline2 = (item) => {
  if (check()) {
    axios.get("goods/offline2?qq=" + qq.value + "&name=" + item.name + "&account=" + item.account).then(res => {
      localStorage.setItem("offlineTime", new Date())

      window.location.href.repeat()
      // window.localStorage.setItem("day", t.value)
    }).catch(err => {

    })
  } else {
    showNotify({type: 'danger', message: "下线冷却时间3h"})

  }
}

const qq = ref("")
const member = ref("")
onMounted(() => {
  qq.value = window.localStorage.getItem("qq")
  axios.get("user/score?qq=" + qq.value).then(res => {
    score.value = res.data?.data.score
    member.value = res.data.data.member
    localStorage.setItem("member", member.value)
    // window.localStorage.setItem("day", t.value)
  }).catch(err => {

  })
  axios.get("goods/record?qq=" + qq.value).then(res => {
    var record = res.data?.data
    online.value = record.online
    offline.value = record.offline
    // window.localStorage.setItem("day", t.value)
  }).catch(err => {

  })

})
</script>

<style scoped lang="less">
.container1 {

  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;

  .top {
    width: 90%;
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    justify-content: start;

    .img {
      width: 70px;
      height: 70px;

    }

    .info {
      text-align: start;
      margin: 0 20px;

      .name {
        font-size: 24px;
        font-weight: 500;
        line-height: 30px;
        margin-top: 20px
      }
    }

  }

  .card {
    width: 90%;
    background: linear-gradient(180deg, #409EFF, #85b3f8);
    height: 150px;
    z-index: 10;
    border-radius: 10px;
    text-align: start;

    .text,
    .score {
      color: #fff;
      font-size: 20px;
      margin: 10px 20px;
      font-weight: 700;
      height: 25px;
    }

    .score {
      font-size: 30px;
    }

    span {
      color: #ffffff;
      margin-left: 20px;
    }
  }

  .card::before {
    width: 94%;
    content: "";
    display: block;
    position: relative;
    background-color: rgba(108, 163, 246, .3);
    height: 15px;
    bottom: -150px;
    margin: 0 auto;
    border-radius: 0 0 10px 10px;

  }

  .box {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 90%;
    box-sizing: border-box;
    margin-top: 40px;

    background-color: #fff;
    border-radius: 10px;
    flex-wrap: wrap;

    .item {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      width: 33%;
      margin: 20px 0;
      justify-content: center;
      align-items: center;
    }
  }
}

.record {
  width: 90%;
  margin: 20px auto;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;

  img {
    width: 35vw;
    height: 17vw;
    max-width: 200px;
    max-height: 100px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 10px;
  }

  .game {
    width: 100%;
    margin: 10px auto;
    display: flex;
    justify-content: flex-start;
    border: 1px solid #DCDFE6;
    padding: 10px;
    border-radius: 10px;

    .content {
      display: flex;
      flex-direction: column;
      color: #909399;
      line-height: 20px;
    }
  }
}


</style>